<template>
  <div class="demo">
    <el-card>
      <el-form inline label-width="100">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="api">
              <el-input v-model="apiurl" style="width: 400px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="params">
              <el-input v-model="paramsText" style="width: 400px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px;">
      <PageForm 
        :default="defaultData" 
        :api="apiurl" 
        :params="apiParams" 
        label-width="100"
        @result="onPageFormChange" 
      />
      <div style="margin-top: 20px;">校验结果：{{ pageResult?.valid }}</div>
      <div style="margin-top: 20px;">输出JSON：{{ pageResult?.data }}</div>
    </el-card>
  </div>
</template>

<script>
import PageForm from '@/components/PageForm/index.vue'

export default {
  name: 'Demo',
  components: {
    PageForm
  },
  data() {
    return {
      showBuilder: false,
      defaultData: [],
      defaultData: [ { "field_label": "买入金额", "field_key": "buy_amount", "field_value_type": "float", "field_component": "number", "supported_operator": "more", "is_require": "yes", "more_condition": [ { "field_id": 1740037154287, "pre_append_text": "", "end_append_text": "", "field_key": "chibidizhi", "supported_operator": "equal", "field_value": 2, "value": 1, "field_component": "number", "field_label": "持有人数", "field_value_type": "intval" } ], "value": 200 }, { "field_label": "设置滑点", "field_key": "huadian", "field_value_type": "int", "field_component": "number", "supported_operator": "equal", "is_require": "yes", "more_condition": [], "value": 3 }, { "field_label": "开启防夹", "field_key": "fangjia", "field_component": "select", "field_value_type": "string", "supported_operator": "equal", "is_require": "yes", "more_condition": [], "value": "open" }, { "field_label": "黑名单", "field_key": "heimingdan", "field_component": "select", "field_value_type": "string", "supported_operator": "one_of", "is_require": "yes", "more_condition": [], "value": [ "hMrbubn953gMYSHLSBe57pnkiBgeimoUm2HNueVdzQ71", "EQvL5wcMu9AmTRzHyy7PPqk4UxHT9ZUzTmfn8nogqexy2", "EzDn2j1tWvNN6o9cD7hZg6eu8jU3EGQvpm3KwHyLeb7p1" ] }, { "field_label": "使用钱包", "field_key": "shiyongqianbao", "field_component": "select", "field_value_type": "string", "supported_operator": "one_of", "is_require": "yes", "more_condition": [], "value": [ "hMrbubn953gMYSHLSBe57pnkiBgeimoUm2HNueVdzQ73", "Cqk6YAi17o6KekdhfczHhY1J1QEWm79XGR5EuUXyohvd3", "7WYmzyyS9JtuyL1X2WoTgjA5VYmsJYSBKk1o2gVjq9HN2" ] } ],
      apiurl: 'https://z.bajie.io/dex/api/get_buy_field',
      paramsText: '{"size": "big","color": "red"}',
      pageResult: null
    }
  },
  computed: {
    apiParams() {
      try {
        return JSON.parse(this.paramsText)
      } catch (e) {
        return {}
      }
    }
  },
  mounted() {
  },

  methods: {
    onPageFormChange(result) {
      console.log(result)
      this.pageResult = result
    }
  }
}
</script>

<style lang="scss" scoped>
  .demo {
    margin: 0;
    color: #666;
  }
</style>